{% extends "base.html" %}
{% load grav_tag %}
{% load is_like %}
{% block main_content %}
    <div class="product-showcase">
        <div class="product-header">
            <div class="product-image">
                <img src="{{ MEDIA_URL }}{{ product.image_link }}" alt="{{ product.name }}"/>
            </div>
            <div class="product-details">
                <h1 class="product-title">{{ product.name }}</h1>
                <div class="product-meta">
                    <div class="meta-item">
                        <i class="fas fa-store"></i>
                        {{ product.shop_name }}
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-shopping-bag"></i>
                        {{ product.shop_type }}
                    </div>
                    <div class="meta-item price">
                        <i class="fas fa-yen-sign"></i>
                        {{ product.price }}
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-star"></i>
                        评价: {{ product.d_rate_nums }}
                    </div>
                </div>
                
                <div class="action-buttons">
                    <a href="{{ product.origin_product_link }}" target="_blank" class="action-button primary">
                        <i class="fas fa-shopping-cart"></i>
                        前往购买
                    </a>
                    {% if is_collect %}
                        <a href="{% url 'decollect' product.id %}" class="action-button warning">
                            <i class="fas fa-star"></i>
                            取消收藏
                        </a>
                    {% else %}
                        <a href="{% url 'collect' product.id %}" class="action-button secondary">
                            <i class="far fa-star"></i>
                            点击收藏
                        </a>
                    {% endif %}
                    <div class="collect-count">
                        <i class="fas fa-users"></i>
                        收藏人数: {{ product.collect.count }}
                    </div>
                </div>

                <div class="tags-section">
                    <div class="meta-item">
                        标签：
                        {% for tag in product.tags.all %}
                            <a href="{% url 'one_tag' tag.id %}" class="tag">{{ tag.name }}</a>
                        {% endfor %}
                    </div>
                </div>

                {% if user_rate is not None %}
                    <div class="meta-item rating-display">
                        <i class="fas fa-star"></i>
                        您已评分: {{ user_rate.mark }}
                    </div>
                {% else %}
                    <form action="{% url 'score' product.id %}" method="post" class="rating-form">
                        {% csrf_token %}
                        <select name="score" class="score-select">
                            <option>1.0</option>
                            <option>2.0</option>
                            <option>3.0</option>
                            <option>4.0</option>
                            <option>5.0</option>
                        </select>
                        <button type="submit" class="action-button secondary">
                            <i class="fas fa-star"></i>
                            提交评分
                        </button>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="recommendations-section ios-card">
        <div class="header-content">
            <h2 class="ios-title">
                <i class="fas fa-thumbs-up"></i>
                基于物品推荐
            </h2>
            <button class="ios-button secondary" onclick="get_item_recommend()">
                <i class="fas fa-sync-alt"></i>
                换一批
            </button>
        </div>
        <div class="products-grid" id="item-recommend">
            <!-- 推荐内容将通过JavaScript动态加载 -->
        </div>
    </div>

    <div class="movie">
        <div class="comments-container">
            <!-- 评论输入框 -->
            <div class="comment-form">
                <form action="{% url 'comment' product.id %}" method="post">
                    {% csrf_token %}
                    <div class="input-wrapper">
                        <textarea class="comment-input" name="comment" placeholder="分享你的想法..." rows="3"></textarea>
                        <button type="submit" class="comment-submit">
                            <i class="fas fa-paper-plane"></i>
                            发表评论
                        </button>
                    </div>
                </form>
            </div>

            <!-- 评论列表 -->
            <div class="comments-list">
                <h2 class="comments-title">
                    <i class="far fa-comments"></i>
                    评论（{{ comments|length }}）
                </h2>
                {% for comment in comments %}
                <div class="comment-item">
                    <div class="comment-avatar">
                        <img src='{{ comment.user.email|gravatar:"48" }}' alt="用户头像">
                    </div>
                    <div class="comment-content">
                        <div class="comment-header">
                            <span class="comment-author">{{ comment.user.username }}</span>
                            <span class="comment-time">{{ comment.create_time|date:"Y-m-d H:i" }}</span>
                        </div>
                        <div class="comment-text">{{ comment.content }}</div>
                        <div class="comment-actions">
                            <a href="{% url 'like_comment' comment.id product.id %}" 
                               class="like-btn {% if user in comment.likes.all %}liked{% endif %}">
                                <i class="far {% if user in comment.likes.all %}fas{% endif %} fa-heart"></i>
                                <span>{{ comment.likecomment_set.count }}</span>
                            </a>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="no-comments">
                    <i class="far fa-comment-dots"></i>
                    <p>暂无评论，来说说你的看法吧～</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

{% block bottom-js %}
<script>
    function get_item_recommend() {
        var current_product_id = "{{ product.id }}";
        $.ajax({
            url: '/item_recommend/',
            type: 'GET',
            data: {
                'product_id': current_product_id
            },
            success: function(result) {
                var html = "";
                var array_length = result.length;
                for (var i = 0; i < array_length; i++) {
                    html += `
                        <div class="product-card">
                            <a href="/product/${result[i].id}">
                                <div class="product-image">
                                    <img src="${result[i].image_link}" alt="${result[i].name}"/>
                                </div>
                                <div class="product-info">
                                    <h3 class="product-title">${result[i].name.substring(0, 24)}</h3>
                                    <div class="product-meta">
                                        <span class="product-price">￥${result[i].price || 0}</span>
                                        <span class="ios-tag">
                                            <i class="fas fa-star"></i>
                                            ${result[i].d_rate_nums || 0}
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    `;
                }
                $('#item-recommend').html(html);
            }
        });
    }

    // 页面加载完成后立即调用
    get_item_recommend();
</script>
{% endblock %}
